<template>
  <div class="detail-box">
   <toptitle :title="detailArr.title"></toptitle>
    <el-container>
      <div class="video-box">
        <video :src="detailArr.playUrl" controls></video>
      </div>
    </el-container>
  </div>
</template>
<script>
import toptitle from './top_title'
export default {
  data(){
    return{
      id: 0,
      detailArr: []
    }
  },
  created(){
    this.getDetailInfor();
  },
  components:{
    toptitle
  },
  methods: {
    getDetailInfor: function() {
      this.id = this.$route.params.id;
      let detailData = this.$store.state.listData;
      for(let i=0; i<detailData.length; i++){
        let obj = detailData[i];
            if(obj.id == this.id){
              this.detailArr = obj;
            }
      }
    }
  }
}
</script>
<style scoped>
/* 修改 */
  .video-box{
    margin: 0 auto;
    width: 90%;
    height: 440px;
    background-color: rgba(226, 223, 223,0.6);
    color: #ccc;
  }
  .video-box video{
    display: block;
    width: 100%;
    height: 100%;
    background-color: bisque;
  }
</style>

